<!--
按照书写位置（引入方式）不同分类：

    1（行内式）内联/行内样式表
        - 作用范围：当前标签
        - 直接在标签内部的【style属性】中设置
        - 适用于修改简单样式
        - 缺点是与html结构不分离，耦合度太高

    2（嵌入式）内部样式表
        - 作用范围：当前html页面。
        - 将html页面中的所有css代码抽取出来，单独放到一个style标签中；
        - style位置随意，但一般放在head标签中；
        - 它嵌入到html页面中，属于分离了但没有完全分离的情况。

    3（链接式）外部样式表
        - 作用范围：引入的html页面
        - 利用link标签将外部css文件引入到html页面中
        - 优点是可以复用、结构与样式完全分离、耦合度低
-->
<link rel="stylesheet" href="css/test.css">
<style>
    div {
        color: red;
    }
</style>

<p style="color: blue; font-size: 20px;">行内式</p>
<div>嵌入式</div>
<span>链接式</span>